<template>
  <div id="app" class="weather-card">
    <Weathersearch></Weathersearch>
    <Weather></Weather>
  </div>
</template>

<script>

import Weathersearch from "./components/weathersearch.vue";
import Weather from "./components/weather.vue";

export default {
  name: 'app',
  components: {
    Weathersearch,
    Weather
  }
}
</script>

<style>

body {
        font-family: "Arial", sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background: linear-gradient(135deg, #74b9ff, #a29bfe);
        color: #333;
      }

      .weather-card {
        background-color: white;
        border-radius: 15px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        padding: 30px;
        width: 350px;
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .weather-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
      }

</style>
